// 定义食物类Food
class Food {
   // 定义一个属性表示食物所对应的元素
   element: HTMLElement
   constructor() {
      // 获取页面中的food元素，并将其赋值给element
      this.element = document.querySelector('.food')!
   }

   // 定义一个获取食物X轴坐标的方法
   get X() {
      return this.element.offsetLeft
   }

   // 定义一个获取食物Y轴坐标的方法
   get Y() {
      return this.element.offsetTop
   }

   // 修改食物的位置
   change() {
      // 生成一个随机位置
      // 食物位置最小是0，最大是290
      // 蛇移动一次的距离为10。所以要求食物的坐标必须为整10
      let left = Math.floor(Math.random() * 30) * 10
      let top = Math.floor(Math.random() * 30) * 10
      this.element.style.left = left + 'px'
      this.element.style.top = top + 'px'
   }
}

// 测试代码
// const food = new Food()
// console.log(food.X, food.Y)
// food.change()
// console.log(food.X, food.Y)

export default Food